Skip to content
lab components / Structure

Base Layout

Base Layout is the foundational structure for organizing content within the platform, providing a consistent and user-friendly experience.

CompositionExamplesPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { BaseLayout } from "@siteimprove/fancylab";

#Composition

The component is expected to be updated. See the new design pattern. Review the new pattern and follow these guidelines for a consistent user experience.

The Base Layout comprises the following elements, each serving a specific purpose:

  • Purpose: Orients the user and facilitates navigation.
  • Contents:
    • Page Title: Clearly communicates the current page's content, using the same label as the corresponding side navigation item. Keep it concise and informative (e.g., "Accessibility Overview").
    • Contextual Actions (Optional): Include relevant actions like search, export, or other context-specific tools. Prioritize the most important actions and use progressive disclosure to reveal additional options when needed.
  • Purpose: Guides users through the platform's content and features.
  • Types:
    • Breadcrumbs: Always present if the current page is not a top-level item in the Side Navigation.
    • Side Navigation: The primary navigation method for complex hierarchies with multiple sections and subsections.
    • Horizontal Navigation: A secondary navigation option suitable for simpler hierarchies with fewer top-level categories.

#Main content area:

  • Purpose: Houses the page's core content.
  • Implementation:
    • Grid and Grid.Section: Employ the Grid component for overall layout, dividing the area into rows and columns. Use Grid.Section to define distinct content sections within the grid.
    • Content.Layout: Utilize Content to further structure and organize content within each Grid.Section.
    • Layout Principles: Adhere to established visual design principles, such as hierarchy, alignment, and spacing, to create a clear and aesthetically pleasing presentation.

#Examples

#Default

The default variant includes breadcrumbs for navigation hierarchy and a content container typically used to display a card, paragraph or a block of text. This variant is suitable for pages with clear hierarchical structures and a primary focus on textual content.

"Social Media that have referred visitors to your website. Expand the table for referring social media pages, trend graphs, and entry pages.",
<BaseLayout breadcrumbs={{ items: [ { title: "Siteimprove", url: "https://siteimprove.com/" }, { title: "Github", url: "https://github.com/" }, { title: "Wikipedia", url: "https://wikipedia.org/" }, ], "aria-label": "breadcrumbs", }} id="content" > "Social Media that have referred visitors to your website. Expand the table for referring social media pages, trend graphs, and entry pages.", </BaseLayout>

#Usage without breadcrumbs

This variant excludes breadcrumbs and is ideal for pages where navigation hierarchy is less critical or for platform with alternative navigation methods, e.g Side Navigation.

"Social Media that have referred visitors to your website. Expand the table for referring social media pages, trend graphs, and entry pages.",
<BaseLayout id="content"> "Social Media that have referred visitors to your website. Expand the table for referring social media pages, trend graphs, and entry pages.", </BaseLayout>

#Usage with page header

This variant incorporates a prominent page header, often including a title and content. This is beneficial for pages requiring a strong visual emphasis on the page title and textual content.

Data Retention

"Data older than the chosen retention period will be deleted forever and cannot be retrieved."
<BaseLayout pageHeaderProps={{ title: "Data Retention", }} breadcrumbs={{ items: [ { title: "Siteimprove", url: "https://siteimprove.com/" }, { title: "Github", url: "https://github.com/" }, { title: "Wikipedia", url: "https://wikipedia.org/" }, ], "aria-label": "breadcrumbs", }} id="content" > "Data older than the chosen retention period will be deleted forever and cannot be retrieved." </BaseLayout>

#Properties

Social Media that have referred visitors to your website. Expand the table for referring social media pages, trend graphs, and entry pages.
PropertyDescriptionDefinedValue
idRequired
stringID for the main component of base-layout
childrenOptional
elementelements to populate the base layout
breadcrumbsOptional
objectBreadcrumbs to be displayed for navigation
pageHeaderPropsOptional
objectoptional extra properties for the page header
aria-labelOptional
string
pickersOptional
element

#Guidelines

#Best practices

#General

Use BaseLayout when:

  • Establishing a consistent visual structure across pages or screens.
  • Organizing content into distinct, logical sections.
  • Providing a clear navigational hierarchy, especially with the default variant.

#Placement

Typically, BaseLayout serves as the main structural container for platform screens, wrapping the primary content areas.

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your BaseLayout to existing components for visual consistency.
  • Utilize ample white space to create a clean, uncluttered interface.
  • Strive for a balanced distribution of elements within the header and throughout the layout.
  • Highlight the most critical actions for the current context, minimizing distractions.
  • Reveal additional options or actions as needed, rather than overwhelming users with everything at once.

#Do not use when

  • Content is minimal and doesn't require a structured layout.
  • A different layout pattern better suits the specific content type. Refer to available Patterns for alternatives.

#Accessibility

  • Ensure content within the Base Layout is well-structured and easy to scan.
  • This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

Page Titles

  • Use the same label from the side navigation for consistency.
  • Keep them short, informative, and in sentence case (e.g., "Account Settings").